<!--车队缴纳费用统计-->
<!--车队缴纳情况统计-->
<template>
  <div class="public-common">
    <div class="public-title">车队缴纳费用统计</div>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="14">
          <el-form-item label="名称">
            <el-input v-model="form.ming" placeholder="请输入搜索关键词进行快速搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
      <el-table-column label="统计年份" fixed="left" prop="a1">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="dialogVisible=true">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.now"
      :page-sizes="page.sizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      style="margin-top:10px;">
    </el-pagination>
    <el-dialog title="车队缴纳费用统计" :visible.sync="dialogVisible" width="80%">
      <el-form :model="editForm" ref="editForm" label-width="80px" class="qysb-form-f">
        <el-scrollbar style="height:100%;">
          <div style=" width: 95%; margin: 0 auto;">
            <h4 style="margin: 10px 0; overflow: hidden;"><span style="float: right;">报表统计日期：2019-10-17</span>公司名称：管理处</h4>
                <table class="border-table">
                  <tbody>
                    <tr>
                      <th rowspan="2" style="width: 120px"> 车队</th>
                      <th colspan="2"> 1月</th>
                      <th colspan="2"> 2月</th>
                      <th colspan="2"> 3月</th>
                      <th colspan="2"> 4月</th>
                      <th colspan="2"> 5月</th>
                      <th colspan="2"> 6月</th>
                      <th colspan="2"> 7月</th>
                      <th colspan="2"> 8月</th>
                      <th colspan="2"> 9月</th>
                      <th colspan="2"> 10月</th>
                      <th colspan="2"> 11月</th>
                      <th colspan="2"> 12月</th>
                    </tr>
                    <tr>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                      <th> 未交 </th>
                      <th> 已交 </th>
                    </tr>
                  </tbody>
                </table>
          </div>

          <div style="text-align:center;margin-top:6px;">
            <el-button type="primary" @click="">打印</el-button>
            <el-button type="info" size="small" @click="dialogVisible=false">取消</el-button>
          </div>
        </el-scrollbar>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tabledata: [
          {
            a1: '2017',
          },
          {
            a1: '2018',
          },
          {
            a1: '2019',
          },
        ],
        page: {
          now: 1,
          pagesize: 10,
          sizes: [2, 10, 20, 50, 100],
          total: 0,
          key: ''
        },
        form: {
          ming: ''
        },
      }
    },
    methods: {
      //分页
      handleSizeChange(pagesize) {
        this.page.pagesize = pagesize;
        this.search(true, true);
      },
      handleCurrentChange(pageno) {
        this.page.now = pageno;
        this.search(true, true);
      }

    }
  }
</script>

<style>
  .border-table a {
    color: #409EFF;
    text-decoration: none;
  }

  .border-table {
    width: 100%;
    display: table;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-collapse: collapse !important;
    border-spacing: 0px !important;
  }

  .border-table th,
  .border-table td {
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 10px 2px;
    text-align: center;
    vertical-align: middle;
    min-width: 40px;
  }

  .cyqlabel .el-form-item__label {
    width: 100px !important;
  }

  .cyqlabel .el-form-item__content {
    margin-left: 100px !important;
  }

  .public-common .el-form-item .el-input {
    width: 100%;
  }

  .public-title,
  .fuwukab {
    line-height: 30px;
    background-color: #deecfd;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #15428F
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }
</style>
